<template>
  <div id="addhost">
    <ReturnPage text="添加主机" />
    <div class="content">
      <div class="container">
        <div class="choosedHost">{{ checkHost }} 台</div>
        <div class="translate">
          <span>{{ $route.query.serviceName }}</span>
        </div>
        <div class="addService">
          <el-input
            v-model="query.searchVal"
            placeholder="请输入实例名,按下回车搜索"
            clearable
            size="small"
            @keyup.enter.native="getHostExampleDetail"
            style="width: 300px"
          >
          </el-input>
        </div>
        <!-- <div class="prompt fbc">
          <span
            >主机转移到目标模块后，若目标模块配置有服务模板，则新增相应的服务实例</span
          >
        </div> -->
        <div class="collapse_box mt10">
          <div class="tp_box">
            <el-table
              :data="tableData"
              v-loading="loading"
              empty-text="暂无可选主机"
              size="mini"
              height="calc(100vh - 450px)"
              @selection-change="handleSelectionChange"
              :header-cell-style="{ background: '#eee', height: '60px' }"
            >
              <el-table-column type="selection" align="left" />
              <el-table-column prop="model_example_id" label="ID">
              </el-table-column>
              <el-table-column prop="model_example_name" label="实例名">
              </el-table-column>
              <el-table-column
                v-for="item in tableFIelds"
                :key="item.modelFieldId"
                :label="item.comment"
                align="left"
                :prop="item.newFieldName"
              ></el-table-column>
            </el-table>
            <pagination
              v-show="tableData.length > 0"
              :total="tableData.length"
              :page.sync="query.pageNum"
              :limit.sync="query.pageSize"
              @pagination="getHostExampleDetail"
            />
          </div>
        </div>
      </div>
      <div class="operate">
        <el-button
          type="primary"
          style="margin-left: 10px"
          size="small"
          @click="addHost"
          >确认添加</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import {
  getModelIdCategoryList_Api, //根据模型id查询模型分组列表
} from "@/api/configuration/resource.js";
import {
  getHostExampleDetail_Api, //获取主机实例列表
  editModelExample_Api, //编辑模型实例
} from "@/api/configuration/resource";
import {
  getModelCategoryList_Api, //模型分组列表
} from "@/api/configuration/model.js";
export default {
  data() {
    return {
      query: {
        searchVal: null,
        pageSize: 10,
        pageNum: 1,
      },
      loading: false,
      checkHost: 0, //已选主机数量
      //下拉框
      options: [
        {
          value: "模块",
          label: "模块",
        },
      ],
      //下拉框的值
      value: "模块",
      activeName: "1", //展开的列表
      //表格数据
      tableData: [],
      multipleSelection: [], //多选
      //列表字段数据
      tableFIelds: [],
    };
  },
  methods: {
    //获取主机实例列表
    getHostExampleDetail() {
      this.loading = true;
      getHostExampleDetail_Api(this.query).then((res) => {
        if (res.rows.length) {
          //把没有选中的主机渲染
          this.tableData = res.rows.filter(
            (item) => item.service_id != this.$route.query.serviceId
          );
          this.checkHost = res.rows.length - this.tableData.length;
        }
        this.loading = false;
      });
    },
    //获取列表字段信息
    getTableFields() {
      this.loading = true; //开启列表loading
      let modelId = "";
      getModelCategoryList_Api().then((res) => {
        res.data.forEach((item) => {
          item.cgModels.forEach((ele) => {
            if (ele.modelType == 1) {
              modelId = ele.modelId;
              //查询字段
              getModelIdCategoryList_Api({ modelId: modelId }).then((res) => {
                if (res.data.length) {
                  //列表字段生成
                  res.data.forEach((item) => {
                    this.tableFIelds = [
                      ...this.tableFIelds,
                      ...item.cgModelFields,
                    ];
                  });
                  this.loading = false;
                } else this.loading = false; //关闭列表loading
              });
            }
          });
        });
      });
    },
    //多选列表项
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    //确认添加主机实例
    addHost() {
      if (this.multipleSelection.length) {
        const tempArr = this.multipleSelection.map((item) => {
          return editModelExample_Api({
            // modelId: item.model_id,
            // modelExampleId: item.model_example_id,
            ...item,
            serviceId: this.$route.query.serviceId,
          });
        });
        Promise.all(tempArr).then((res) => {
          res.forEach((item) => {
            if (item != undefined && item.code == 200) {
              this.$message.success("操作成功");
              this.$router.push({ path: "/configuration/business/topology" });
            }
          });
        });
      } else this.$message.info("请先选择主机实例");
    },
  },
  created() {
    // this.getHostList();
    this.getHostExampleDetail(); //获取主机实例列表
    this.getTableFields(); //根据模型id查询模型分组列表(modelId后端要求暂时写死)
  },
};
</script>

<style lang="scss" scoped>
#addhost {
  height: calc(100vh - 104px);
  .content {
    height: 95%;
    font-size: 12px;
    .container {
      margin-top: 10px;
      height: calc(100% - 71px);
      box-sizing: border-box;
      padding-left: 100px;
      padding-right: 15px;
      .choosedHost {
        position: relative;
        &::before {
          content: "已选主机：";
          position: absolute;
          left: -65px;
        }
      }
      .translate {
        border-bottom: 1px solid #e2e4ea;
        padding: 20px 0 15px;
        position: relative;
        span {
          border: 1px solid #d2d5da;
          display: inline-block;
          font-size: 10px;
          padding: 5px 10px;
          border-radius: 14px;
        }
        &::before {
          content: "服务名称：";
          position: absolute;
          left: -65px;
          top: 22px;
        }
      }
      .addService {
        padding: 10px 0;
        position: relative;
        span {
          color: #5492fe;
          position: relative;
          &::after {
            content: "";
            position: absolute;
            bottom: -10px;
            left: -5px;
            display: block;
            width: 85px;
            height: 1px;
            border-bottom: 2px solid #5492fe;
          }
        }
        &::before {
          content: "主机选择：";
          position: absolute;
          left: -65px;
          top: 15px;
        }
      }
      .prompt {
        height: 32px;
        font-size: 10px;
      }
      .collapse_box {
        height: calc(100vh - 370px);
        overflow-y: scroll;
      }
    }
    .operate {
      height: 50px;
      border-top: 1px solid #dcdee5;
      border-radius: 5px;
      margin-top: 10px;
      background-color: #ffffff;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
  }
}

::v-deep .el-collapse .el-collapse-item > div:first-child {
  height: 30px;
  .el-collapse-item__header {
    background-color: #dcdee5;
    border-radius: 3px;
    height: 30px;
    position: relative;
    .title_text {
      height: 30px;
      line-height: 30px;
      padding-left: 15px;
    }
    .right_text {
      position: absolute;
      right: 30px;
      font-size: 11px;
    }
  }
}

::v-deep
  .el-collapse
  .el-collapse-item
  .el-collapse-item__wrap
  .el-collapse-item__content {
  padding-bottom: 0px;
}

::v-deep .el-table__body-wrapper {
  height: calc(100% - 61px) !important;
}
</style>